<template>
  <div class="swiper-main">
    <swiper :options="swiperOptionMain">
      <swiper-slide v-for="(item, index) in imgUrls" :key="index">
        <img :src="item.src" />
      </swiper-slide>
      <div
        v-show="stylesType == 1"
        slot="pagination"
        class="swiper-pagination"
      ></div>
      <div
        v-show="stylesType == 0"
        slot="button-prev"
        class="swiper-button-prev swiper-button-white"
      ></div>
      <div
        v-show="stylesType == 0"
        slot="button-next"
        class="swiper-button-next swiper-button-white"
      ></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    swiper,
    swiperSlide
  },
  props: {
    imgUrls: {
      type: String,
      default: ""
    },
    stylesType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      swiperOptionMain: {
        spaceBetween: 30,
        effect: "fade",
        loop: false,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.swiper-main {
  width: 100%;
  //   height: 200px;
  .swiper-slide {
    img {
      width: 100%;
      height: 200px;
    }
  }
  .swiper-pagination-bullet-active {
    background: #52a2f4;
  }
  .swiper-button-next,
  .swiper-button-prev {
    width: 15px;
    height: 24px;
    margin-top: -12px;
    background-size: 15px 24px;
  }
}
@media (max-width: 789px) {
  .swiper-main {
    .swiper-slide {
      min-height: 180px;
      position: relative;
      text-align: center;
      img {
        width: auto;
        height: 100%;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
      }
    }
  }
}
@media (max-width: 500px) {
  .swiper-main {
    .swiper-button-next,
    .swiper-button-prev {
      width: 12px;
      height: 20px;
      margin-top: -10px;
      background-size: 12px 20px;
    }
    .swiper-pagination-bullet {
      width: 6px;
      height: 6px;
    }
  }
}
</style>
